<!--
 * @Description: 
 * @Author: Binggan
 * @Date: 2019-04-15 15:45:04
 * @LastEditors: Binggan
 * @LastEditTime: 2020-03-03 19:59:41
 -->
 <template>
  <div class="content-wrap">
    <Divider class="divider" orientation="left">
      <h2>新闻管理</h2>
    </Divider>
    <div class="manager-box">
      <Button type="primary" size='large' to="/addPaper" style="margin-right:20px;">添加新闻</Button><!-- @click="addEquip" -->
      <!-- <Button type="success" size='large' to="/paperType">新闻类型管理</Button> -->
    </div>
    <!-- 列表 -->
    <Table stripe :columns="columns1" :data="data1" class="m-t-20">
      <template slot-scope="{row,index}" slot="thumbnail">
        <img class="course-thumbnail clickable" title="点我看大图" :src="row.img" @click="toPreviewImg(row)" />
      </template>
      <template slot-scope="{row,index}" slot="type">
        <Tag :color="row.newsTypeName=='热点新闻'?'error':'primary'">{{row.newsTypeName}}</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="read(row)">查看</Button>
        <div style="display:inline-block">
          <!-- <Button type="warning" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button> -->
          <Button type="error" size="small" @click="deleteEquipment(row)">删除</Button>
        </div>

      </template>
    </Table>
    <!--分页 -->
    <div style="margin: 10px;overflow: hidden">
      <p class="totalTip">共{{count}}条内容</p>
      <div style="float: right;">
        <Page :total="count" :current="page" :page-size='pageSize' @on-change="changePage"></Page>
      </div>
    </div>

    <!--删除对话框 -->
    <Modal v-model="modal2">
      <p slot="header" style="color:#f60">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="font-size:14px">
        <p style="color:#000">请确认是否删除这条新闻?</p>
        <ul class="department-delinfo">
          <li><span class="title">新闻名称：</span><span>{{tempEquip.title}}</span></li>
        </ul>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal2=false">取消</Button>
        <Button type="error" size="large" @click="toDelete">确认删除</Button>
      </div>
    </Modal>

    <Modal v-model="modalImg" class-name="original-img-preview" :closable="false" footer-hide fullscreen>
      <div slot="header" class="img-info-header">
        <div class="img-info">
          <Icon type="ios-barcode-outline" size="24" />
          <span>{{previewImgObj.title}}</span>
        </div>
        <Button type="primary" shape="circle" icon="md-close" @click="modalImg=false">关闭</Button>
      </div>
      <div style="text-align:center;">
        <img :src="previewImgObj.src" :alt="previewImgObj.title">
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import qs from "qs"
export default {
  data() {
    return {
      ruleValidate: {
        name: [
          { required: true, message: "新闻名称不能为空！", trigger: "blur" }
        ]
      },
      columns1: [
        { title: "新闻标题", key: "title" },
        {
          title: "缩略图",
          slot: "thumbnail"
        },
        {
          title: "新闻类型",
          slot: "type"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      allEquipments: [],
      tempEquip: {
        id: "",
        name: "",
        note: "",
        image: ""
      },
      editEquip: {
        id: "",
        name: "",
        note: "",
        image: ""
      },
      isAddEquip: true,
      modal1: false,
      modal2: false,
      modalImg: false,
      previewImgObj: { src: "", title: "" },
      count: 0,
      page: 1,
      pageSize: 10,
      tempUploadImg: "", //存储上传图片对象
      otipShow: false
    };
  },
  computed: {
    ...mapState(["user", "serviceUrl", "equipTypes"]),
    data1() {
      this.count = this.allEquipments.length;
      let startNum = (this.page - 1) * this.pageSize;
      let endNum =
        this.page * this.pageSize > this.count
          ? this.count
          : this.page * this.pageSize;
      console.log(startNum, endNum);
      return this.allEquipments.slice(startNum, endNum);
    }
  },
  methods: {
    getAllEquipment() {
      this.$axios.get("/news/findAllNews").then(res => {
        if (res.errorCode == 0) {
          console.log(res);
          this.allEquipments = res.data;
          this.count = res.data.length;
        }
      });
    },
    changePage(page) {
      //分页
      this.page = page;
    },
    read(row) {
      //查看信息
      this.$router.push("/newsDetail/" + row.id);
    },
    deleteEquipment(row) {
      this.tempEquip = JSON.parse(JSON.stringify(row));
      this.modal2 = true;
    },
    toDelete() {
      this.$axios
        .post("/news/del", qs.stringify({ id: this.tempEquip.id }))
        .then(res => {
          if (res.errorCode == 0) {
            this.$Message.success("删除成功！");
            this.modal2 = false;
            this.page = 1;
            this.getAllEquipment();
          } else {
          }
        });
    },
    cancEdit() {
      this.modal1 = false;
      this.tipShow = false;
      this.$refs.formAddEquip.resetFields();
      this.tempUploadImg = "";
    },
    resetForm(val) {
      !val && this.$refs.formUserInfo.resetFields();
      !val && this.$refs.formAddCourse.resetFields();
    },
    addEquip() {
      this.modal1 = true;
      this.otipShow = true;
    },
    toPreviewImg(item) {
      //查看大图
      console.log(item);
      this.previewImgObj.src = item.img;
      this.previewImgObj.title = item.title;
      this.modalImg = true;
    }
  },
  created() {
    this.page = 1;
    this.getAllEquipment();
  }
};
</script>
<style lang="scss">
.original-img-preview {
  .img-info-header {
    display: flex;
    color: #f9ff00;
    text-align: center;
    align-items: center;
    .img-info {
      flex: 1;
      text-align: center;
      font-size: 16px;
    }
  }
  .ivu-modal-header {
    background-color: rgba(255, 255, 255, 0.52);
    padding: 10px 16px;
    border: none;
  }
  .ivu-modal-content {
    background-color: rgba(0, 0, 0, 0.6);
    .ivu-modal-body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style lang="scss" scoped>
.course-thumbnail {
  width: auto;
  height: auto;
  max-height: 80px;
}
.bing-upload-btn {
  position: relative;
  cursor: pointer;
  .img-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 0;
  }
}
</style>

